<template>
  <!-- 下方按钮 -->
  <div :style="{
    position: 'absolute',
    right: 0,
    bottom: 0,
    width: '100%',
    borderTop: '1px solid #e9e9e9',
    padding: '20px',
    background: '#fff',
    textAlign: 'center',
    zIndex: 1,
  }">
    <a-button @click="confirm" style="margin: 0px 10px;">
      {{ $t('user.verification-code.required111566110577265') }}
    </a-button>
    <a-button @click="showModal" style="margin: 0px 10px;">
      {{ $t('user.verification-code.required111566110577299') }}
    </a-button>
    <a-modal v-model="visible" :title="$t('user.verification-code.required111566110577300')" @ok="handleOk" centered
             :okText="$t( 'user.verification-code.required111566110577299')">
      <a-form-item :label="$t( 'user.verification-code.required111566110577301')"
                   style="display: flex; justify-content: center">
        <a-select :placeholder="$t( 'user.verification-code.required111566110577301')" style="width: 165px"
                  option-filter-prop="children" :filter-option="filterOption" show-search>
          <a-select-option v-for="item in userList" :value="item.value" :key="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-modal>
    <a-button type="primary" @click="show('add')" style="margin: 0px 10px;">
      {{ $t('user.verification-code.required11156622') }}
    </a-button>
  </div>
</template>
<script>
import {userQuery} from '@/api/common/form'

export default {
  data() {
    return {
      visible: false,
      userList: [] // 存放转办DCO的数据
    }
  },
  created() {
    this.init()
  },
  methods: {
    filterOption(input, option) {
      return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    // 下一步
    show() {
      this.$router.push({path: '/dpia/therequestion/questionthere',})
    },
    // 点击转办
    showModal() {
      this.visible = true;
    },
    // 点击确定
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
    // 下拉菜单
    handleMenuClick(e) {
      console.log('click', e);
    },
    // 转办的DCO
    async init() {
      // 获取用户列表下拉
      const {data: userList} = await userQuery(1);
      this.userList = userList
    },
    confirm() {
      this.$confirm({
        content: this.$t('user.verification-code.required111566110577302'),
        okText: this.$t('user.v15'),
        cancelText: this.$t('user.email.required11'),
      });
      // this.$router.push({ path: '/dpia/therequestion/questionthere' ,})
    },
  }
}
</script>
<style lang="less" scoped>
.zb {
  margin: 20px 50px 80px 150px;
  width: 600px;
}
</style>
